<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <template #header>
                <div>
                    <span>菜单管理</span>
                </div>
            </template>
            <!-- card body -->
            <el-table :data="menuList" border row-key="id">
                <el-table-column label="名称" prop="name" width="240px"></el-table-column>
                <el-table-column label="权限值" prop="code" width="320px" align="center"></el-table-column>
                <el-table-column label="修改时间" prop="updateTime"></el-table-column>
                <el-table-column label="操作" width="360px" align="center">
                    <template #default="scope">
                        <el-button type="primary" size="default" icon="Plus" @click="AddMenu(scope.row)">{{
                            scope.row.level == 4 ? '新增按钮' : '新增菜单' }}</el-button>
                        <el-button type="primary" size="default" icon="Edit" @click="EditMenu(scope.row)"
                            :disabled="scope.row.pid == 0">编辑</el-button>
                        <el-popconfirm :title="`确定删除${scope.row.name}吗?`" @confirm="DeleteThisMenu(scope.row.id)">
                            <template #reference>
                                <el-button type="danger" size="default" icon="Delete"
                                    :disabled="scope.row.pid == 0">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

        </el-card>
        <el-dialog v-model="dialogVisible" :title="menuParams.id ? '编辑菜单' : '新增菜单'" width="600">
            <template #default>
                <el-form ref="form" label-width="100px" :inline="false" size="default">
                    <el-form-item label="菜单名称">
                        <el-input placeholder="请输入菜单名称" v-model="menuParams.name"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单权限值">
                        <el-input placeholder="请输入菜单权限值" v-model="menuParams.code"></el-input>
                    </el-form-item>
                </el-form>

            </template>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleConfirm">确定</el-button>
                    <el-button @click="handleCancel">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { AddorUpdateMenu, DeleteMenu, getMenuList } from '@/api/acl/menu'
import type { MenuData } from '@/api/acl/menu/type';
import type { PermissionListData } from '@/api/acl/role/type';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
let dialogVisible = ref(false)
let menuList = ref<PermissionListData[]>([])
let menuParams = ref<MenuData>(
    {
        name: '',
        code: '',
        level: 0,
        pid: 0
    }
)
const getMenuListData = async () => {
    while (true) {
        try {
            const res = await getMenuList()
            if (res.code == 200) {
                menuList.value = res.data
                break
            }
            else if (res.code == 201) {
                ElMessage.error(res.message)
                break
            }
        } catch (error) {
            console.log('获取菜单列表失败,重新获取中')
        }
    }
}
const AddMenu = (row: PermissionListData) => {
    menuParams.value.pid = row.id
    menuParams.value.level = row.level + 1
    dialogVisible.value = true
}
const EditMenu = (row: PermissionListData) => {
    menuParams.value = row
    dialogVisible.value = true
}
const DeleteThisMenu = async (id: number) => {
    let i = 0
    while (i++ < 5) {
        try {
            const res = await DeleteMenu(id)
            if (res.code == 200) {
                ElMessage.success(res.message)
                getMenuListData()
                break
            }
            else if (res.code == 201) {
                ElMessage.error(res.message)
                break
            }
        } catch (error) {
            console.log('删除菜单失败,重新删除中')
        }
    }
}
const handleConfirm = async () => {
    let i = 0
    while (i++ < 5) {
        try {
            const res = await AddorUpdateMenu(menuParams.value)
            if (res.code == 200) {
                ElMessage.success(menuParams.value.id ? '编辑菜单成功' : '新增菜单成功')
                dialogVisible.value = false
                clearMenuParams()
                getMenuListData()
                break
            }
            else if (res.code == 201) {
                ElMessage.error(res.message)
                break
            }
        } catch (error) {
            console.log('新增菜单失败,重新提交中')
        }
    }
}
const handleCancel = () => {
    dialogVisible.value = false
    clearMenuParams()
}
onMounted(() => {
    getMenuListData()
})
const clearMenuParams = () => {
    menuParams.value = {
        name: '',
        code: '',
        level: 0,
        pid: 0
    }
}
</script>
